<template>
    <div class="page_root" data-page-name="创建配送方案" data-page-identification="t_ziomekx4ys">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_rkqe6n181v 自定义模板_wj7t65m9yw -->
            <a-spin :spinning="loading">
                <div class="create-plan">
                    <a-steps :current="current" class="step">
                        <a-step title="基础信息" />
                        <a-step title="区域需求量" />
                        <a-step title="优化方案" />
                    </a-steps>
                    <div class="content">
                        <div v-show="current === 0" class="form">
                            <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 7 }">
                                <a-form-item label="配送方案名称" v-bind="validateInfos.name">
                                    <a-input v-model:value="formData.name" />
                                </a-form-item>
                                <a-form-item label="配送期间" class="date-group" v-bind="validateInfos.duration">
                                    <a-range-picker
                                        style="width: 100%"
                                        v-model:value="formData.duration"
                                        picker="month"
                                        valueFormat="YYYY-MM"
                                    />
                                </a-form-item>
                            </a-form>
                        </div>
                        <div v-show="current === 1">
                            <a-row :gutter="16">
                                <a-col :span="6">
                                    <a-card>
                                        <a-statistic
                                            title="全部区域总需求量"
                                            :value="statistics.num1"
                                            :precision="2"
                                            suffix="吨"
                                            :value-style="{ color: '#D9001B' }"
                                        />
                                    </a-card>
                                </a-col>
                                <a-col :span="6">
                                    <a-card>
                                        <a-statistic
                                            title="全部区域袋装需求量"
                                            :value="statistics.num2"
                                            :precision="2"
                                            suffix="吨"
                                            :value-style="{ color: '#D9001B' }"
                                        />
                                    </a-card>
                                </a-col>
                                <a-col :span="6">
                                    <a-card>
                                        <a-statistic
                                            title="全部区域散装需求量"
                                            :value="statistics.num3"
                                            :precision="2"
                                            suffix="吨"
                                            :value-style="{ color: '#D9001B' }"
                                        />
                                    </a-card>
                                </a-col>
                                <a-col :span="6">
                                    <a-card>
                                        <a-statistic
                                            title="全部区域熟料需求量"
                                            :value="statistics.num4"
                                            :precision="2"
                                            suffix="吨"
                                            :value-style="{ color: '#D9001B' }"
                                        />
                                    </a-card>
                                </a-col>
                            </a-row>
                            <div class="table-header tag">
                                <div>区域需求量列表</div>
                                <div class="tag-list">
                                    <a-checkbox v-model:checked="distributionRemain" class="distribution-remain"
                                        >剩余发货量配送至运费最低区域</a-checkbox
                                    >
                                    <a-input v-model:value="filterTable1" placeholder="请输入区域名称关键词">
                                        <template #suffix>
                                            <search-outlined />
                                        </template>
                                    </a-input>
                                    <a-button type="link" style="margin-right: -10px" @click="handlerDownloadTemplate"
                                        >下载模板</a-button
                                    >
                                    <a-upload :file-list="[]" :before-upload="beforeUpload">
                                        <a-button type="primary">导入Excel</a-button>
                                    </a-upload>
                                </div>
                            </div>
                            <a-table
                                :columns="columns1"
                                v-model:current="currentPage"
                                :data-source="tableData1"
                                @change="pageChange"
                            >
                                <template #bodyCell="{ column, index }">
                                    <template v-if="column.dataIndex === 'demand'">
                                        <a-input-number
                                            v-model:value="tableData1[(currentPage - 1) * 10 + index].demand"
                                            :min="0"
                                            @change="debounceGetStatistics"
                                        />
                                    </template>
                                </template>
                            </a-table>
                        </div>
                        <div v-show="current === 2">
                            <div>
                                <a-statistic
                                    class="gather"
                                    title="运输总费用"
                                    :value="statistics2.num1"
                                    :precision="2"
                                    suffix="万元"
                                    :value-style="{ color: '#D9001B' }"
                                />
                                <a-statistic
                                    class="gather"
                                    title="汽运费用"
                                    :value="statistics2.num2"
                                    :precision="2"
                                    suffix="万元"
                                    :value-style="{ color: '#D9001B' }"
                                />
                                <a-statistic
                                    class="gather"
                                    title="火运费用"
                                    :value="statistics2.num3"
                                    :precision="2"
                                    suffix="万元"
                                    :value-style="{ color: '#D9001B' }"
                                />
                                <a-statistic
                                    class="gather"
                                    title="船运费用"
                                    :value="statistics2.num4"
                                    :precision="2"
                                    suffix="万元"
                                    :value-style="{ color: '#D9001B' }"
                                />
                                <a-statistic
                                    class="gather"
                                    title="散装总配送量"
                                    :value="statistics2.num5"
                                    :precision="2"
                                    suffix="吨"
                                    :value-style="{ color: '#D9001B' }"
                                />
                                <a-statistic
                                    class="gather"
                                    title="袋装总配送量"
                                    :value="statistics2.num6"
                                    :precision="2"
                                    suffix="吨"
                                    :value-style="{ color: '#D9001B' }"
                                />
                                <a-statistic
                                    class="gather"
                                    title="熟料总配送量"
                                    :value="statistics2.num7"
                                    :precision="2"
                                    suffix="吨"
                                    :value-style="{ color: '#D9001B' }"
                                />
                            </div>
                            <div class="table-header">
                                <div />
                                <div>
                                    <a-input v-model:value="filterTable2" placeholder="请输入企业、区域名称关键词">
                                        <template #suffix>
                                            <search-outlined />
                                        </template>
                                    </a-input>
                                    <!-- 配送调整 暂时取消 -->
                                    <!-- <a-button v-if="!editTable2" type="primary" @click="handlerEditTable2">配送调整</a-button>
              <template v-else>
                <a-button type="primary" @click="editTable2 = false">确认调整</a-button>
                <a-button @click="handlerCancel">取消调整</a-button>
              </template> -->
                                    <!-- <a-button style="margin-left: 8px" type="primary" @click="handlerDownload">导出Excel</a-button> -->
                                </div>
                            </div>
                            <a-table :columns="columns2" :data-source="tableData2">
                                <template #bodyCell="{ column, index, record, text }">
                                    <template v-if="column.dataIndex === 'freight'">
                                        <a-input-number
                                            v-if="editTable2"
                                            v-model:value="tableData2[index].freight"
                                            :min="0"
                                            @change="tableData2[index].locked = true"
                                        />
                                        <template v-else>
                                            {{ formatThousandth(text) }}
                                        </template>
                                    </template>
                                    <template
                                        v-if="
                                            ['distributionQuantity', 'remainDistributionQuantity'].includes(
                                                column.dataIndex
                                            )
                                        "
                                        >{{ formatThousandth(text) }}</template
                                    >
                                    <template v-if="column.dataIndex === 'transportType'">
                                        {{ transportTypeMap[text] }}
                                    </template>
                                </template>
                            </a-table>
                        </div>
                    </div>
                    <div class="footer">
                        <a-button type="primary" v-if="current === 2" @click="handlerSave">保存</a-button>
                        <a-button type="primary" v-if="current > 0" @click="changeCurrent(false)">上一步</a-button>
                        <a-button type="primary" v-if="current === 0" @click="handlerValidate">下一步</a-button>
                        <a-button type="primary" v-if="current === 1" @click="handlerOptimize">开始优化</a-button>
                        <!-- <a-button type="primary" v-if="current === 2" @click="handlerOptimize">重新优化</a-button> -->
                        <a-button @click="handlerUnset">取消</a-button>
                    </div>
                </div>
            </a-spin>
            <!-- end vid_rkqe6n181v 自定义模板_wj7t65m9yw -->
        </a-spin>
    </div>
</template>
  <script setup>
import {
    h,
    ref,
    reactive,
    toRaw,
    markRaw,
    watch,
    computed,
    onBeforeMount,
    onMounted,
    onBeforeUnmount,
    onUnmounted,
    onActivated,
    onDeactivated
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
import {
    cloneDeep,
    isNullOrEmpty,
    isEmptyArr,
    isNullOrUnDef,
    localGet,
    isContained,
    isArray,
    isEmpty,
    merge,
    getDifferenceArray,
    isObject,
    traversalTreeStructure,
    checkCaseCondition,
    renderStringInTemplate,
    handleBreadcrumbJump,
    throttle,
    permission
} from '@/utils/index'
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
/*** PUBLISH_EXEGESIS ***
      import UserTableRecords from '@/model/UserTableRecords';
      *** PUBLISH_EXEGESIS ***/

// 获取传入的流程ID
const props = defineProps({
    processInstanceId: {
        type: String
    }
})
const immediateWatch = (source, callback) => {
    watch(source, callback, { deep: true, immediate: true })
}

/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = []
const pageLoading = reactive({
    loading: false,
    tip: undefined
})

// 处理校验
const setSubFormName = (parentInfo, name) => {
    return [parentInfo.parents, parentInfo.cycleIndex, name]
}

/* ========================== 属性定义 ========================== */

/* -------------------------- 元素数据引用 -------------------------- */

/* ========================== 元素数据引用 ========================== */

/* -------------------------- 页面数据 -------------------------- */

/* ========================== 页面数据 ========================== */

/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */

/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */

/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
    processInstanceId: props.processInstanceId
})

/* ========================== 页面参数 ========================== */

/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================

/* ========================== 组件事件处理方法 ========================== */

/* -------------------------- 生命周期 -------------------------- */
onMounted(() => {})

onUnmounted(() => {
    // 销毁定时器
    setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ? clearInterval(timer) : clearTimeout(timer)
    })
})

/* ========================== 生命周期 ========================== */

/* -------------------------- 数据关联处理 -------------------------- */

/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */

/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */

// ================================定制化逻辑========================================
import { Form } from 'ant-design-vue'
const useForm = Form.useForm
function debounce(callback, timer) {
    let ticker = null
    return () => {
        if (ticker) {
            clearTimeout(ticker)
        }
        ticker = setTimeout(() => {
            callback.apply(callback, arguments)
        }, timer)
    }
}

function downloadExcel(response, name) {
    const blob = new Blob([response], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
    })
    const downloadElement = document.createElement('a')
    const href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download = name // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href)
    return href
}
/**********************************  页面1 start  ****************************************/
const current = ref(1)
const loading = ref(false)
const timeType = ref(1)
const formData = reactive({
    name: '',
    duration: []
})
const rules = reactive({
    name: [
        {
            required: true,
            message: '配送方案名称必填'
        },
        {
            validator: async (_, value) => {
                if (!value) {
                    return Promise.resolve()
                }
                const { data } = await post(`/solution-zjcnfsn-distribution/api/v1/distribution/exist/${value}`)
                return data ? Promise.resolve() : Promise.reject(new Error('该配送名称重复'))
            }
        }
    ],
    duration: [
        {
            required: true,
            message: '配送时间必填'
        }
    ]
})
const { resetFields, validate, validateInfos } = useForm(formData, rules)
function changeCurrent(isPlus = true) {
    if (isPlus) {
        current.value++
    } else {
        current.value--
    }
}

function handlerValidate() {
    validate()
        .then(() => {
            changeCurrent()
        })
        .catch(err => {
            console.log('error', err)
        })
}

/**********************************  页面1 end  ****************************************/

/**********************************  页面2 start  ****************************************/
const formatThousandth = value => {
    if (!value || isNaN(value)) {
        return value || '0.00'
    }
    const [int, fraction] = Number(value).toFixed(2).split('.')
    var reg = /(\d)(?=(?:\d{3})+$)/g
    return int.replace(reg, '$1,') + (!!fraction ? '.' + fraction : '')
}
const columns1 = [
    {
        title: '区域名称',
        dataIndex: 'areaName'
    },
    {
        title: '包装形式',
        dataIndex: 'packingTypeName'
    },
    {
        title: '产品品牌',
        dataIndex: 'brandName'
    },
    {
        title: '产品品种',
        dataIndex: 'categoryName'
    },
    {
        title: '运输方式',
        dataIndex: 'transportTypeName'
    },
    {
        title: '需求量(吨)',
        dataIndex: 'demand'
    }
]

const transportTypeMap = {
    TRAIN: '火运',
    SHIP: '船运',
    BUS: '汽运'
}

let tableData1 = ref([])
// 并不是真克隆 保留本体但是过滤的数据发生改变 此数据也应该改变
let tableData1Clone = []

const currentPage = ref(1)
function pageChange({ current }) {
    currentPage.value = current
}

const statistics = reactive({
    num1: 0,
    num2: 0,
    num3: 0,
    num4: 0
})
function getStatistics() {
    let num1 = 0
    let num2 = 0
    let num3 = 0
    let num4 = 0
    tableData1Clone.forEach(({ demand, packingTypeName }) => {
        num1 += Number(demand)
        packingTypeName = packingTypeName.replace('水泥', '')
        if (packingTypeName === '袋装') {
            num2 += Number(demand)
        } else if (packingTypeName === '散装') {
            num3 += Number(demand)
        } else if (packingTypeName === '熟料') {
            num4 += Number(demand)
        }
    })
    statistics.num1 = num1
    statistics.num2 = num2
    statistics.num3 = num3
    statistics.num4 = num4
}

function beforeUpload(file) {
    const data = new FormData()
    data.append('file', file)
    loading.value = true
    post('/solution-zjcnfsn-distribution/api/v1/distribution/area_demand/import', data).then(({ errorMsg, data }) => {
        loading.value = false
        if (errorMsg) {
            message.error(errorMsg)
        } else {
            tableData1Clone = tableData1.value = data
            getStatistics()
        }
    })
    return false
}

const filterTable1 = ref('')
// 剩余发货量配送至运费最低区域
const distributionRemain = ref(true)

function changeTable1() {
    tableData1.value = tableData1Clone.filter(item => {
        return item.areaName.indexOf(filterTable1.value) !== -1
    })
}

changeTable1 = debounce(changeTable1, 300)

watch(
    () => filterTable1.value,
    () => {
        filterTable1.value
        changeTable1()
    }
)

// 需求量变化 修改统计的相关数据
const debounceGetStatistics = debounce(getStatistics, 300)

function handlerDownloadTemplate() {
    get(`/solution-zjcnfsn-distribution/api/v1/template/download/distribution_optimizing_area_demand`, null, {
        responseType: 'arraybuffer'
    }).then(res => {
        if (res.data) {
            downloadExcel(res.data, '区域需求量列表模板.xlsx')
        } else {
            downloadExcel(res, '区域需求量列表模板.xlsx')
        }
    })
}

const tableData2 = ref([])
let tableData2Clone = tableData2.value
const distributionId = ref('')

let uuid = ''

function genUUID() {
    return (Math.random() * 100000).toFixed(0)
}

function handlerOptimize() {
    loading.value = true
    tableData2.value = tableData2Clone = []
    const data = {
        uuid: uuid || genUUID(),
        name: formData.name,
        duration: formData.duration,
        durationType: String(timeType.value),
        areaDemandList: tableData1.value,
        adjustedItem: current.value === 1 ? [] : tableData2.value,
        distributionRemain: distributionRemain.value
    }

    let timer = null
    post('/solution-zjcnfsn-distribution/api/v1/distribution/optimize', data).then(({ errorMsg, data }) => {
        if (errorMsg) {
            message.error(errorMsg)
            loading.value = false
        } else {
            distributionId.value = data
            timer = setInterval(() => {
                get(`/solution-zjcnfsn-distribution/api/v1/distribution/optimize/${distributionId.value}`).then(
                    ({ errorMsg, data }) => {
                        if (errorMsg) {
                            message.error(errorMsg)
                            loading.value = false
                        }
                        if (data) {
                            loading.value = false
                            tableData2.value = tableData2Clone = data
                            clearInterval(timer)
                            if (current.value === 1) {
                                changeCurrent()
                            }
                        }
                    }
                )
            }, 1000)
        }
    })
}

/**********************************  页面2 end  ****************************************/

/**********************************  页面3 start  ****************************************/

function handlerDownload() {
    get(`/solution-zjcnfsn-distribution/api/v1/distribution/${distributionId.value}/export`, null, {
        responseType: 'arraybuffer'
    }).then(res => {
        if (res.data) {
            downloadExcel(res.data, `${formData.name}.xlsx`)
        } else {
            downloadExcel(res, `${formData.name}.xlsx`)
        }
    })
}

const filterTable2 = ref('')

function changeTable2() {
    tableData2.value = tableData2Clone.filter(item => {
        return (
            item.enterpriseName.indexOf(filterTable2.value) !== -1 || item.areaName.indexOf(filterTable2.value) !== -1
        )
    })
}

changeTable2 = debounce(changeTable2, 300)

watch(
    () => filterTable2.value,
    () => {
        filterTable2.value
        changeTable2()
    }
)

const editTable2 = ref(false)
const columns2 = [
    {
        title: '企业名称',
        dataIndex: 'enterpriseName'
    },
    {
        title: '中转仓',
        dataIndex: 'transferName'
    },
    {
        title: '区域名称',
        dataIndex: 'areaName'
    },
    {
        title: '运输方式',
        dataIndex: 'transportType'
    },
    {
        title: '包装类型',
        dataIndex: 'packingTypeName'
    },
    {
        title: '产品品牌',
        dataIndex: 'brandName'
    },
    {
        title: '产品品种',
        dataIndex: 'category'
    },
    {
        title: '配送量(吨)',
        dataIndex: 'distributionQuantity'
    },
    {
        title: '剩余配送量(吨)',
        dataIndex: 'remainDistributionQuantity'
    },
    {
        title: '配送运费(元)',
        dataIndex: 'freight'
    }
]

const statistics2 = reactive({
    num1: 0,
    num2: 0,
    num3: 0,
    num4: 0,
    num5: 0,
    num6: 0,
    num7: 0
})
function getStatistics2() {
    let num1 = 0
    let num2 = 0
    let num3 = 0
    let num4 = 0
    let num5 = 0
    let num6 = 0
    let num7 = 0
    tableData2Clone.forEach(
        ({ freight, distributionQuantity, transportType, packingTypeName, remainDistributionQuantity }) => {
            num1 += Number(freight)

            if (transportType === 'BUS') {
                num2 += Number(freight)
            } else if (transportType === 'TRAIN') {
                num3 += Number(freight)
            } else if (transportType === 'SHIP') {
                num4 += Number(freight)
            }
            packingTypeName = packingTypeName.replace('水泥', '')
            if (packingTypeName === '袋装') {
                num6 += Number(distributionQuantity)
                num6 += Number(remainDistributionQuantity)
            } else if (packingTypeName === '散装') {
                num5 += Number(distributionQuantity)
                num5 += Number(remainDistributionQuantity)
            } else if (packingTypeName === '熟料') {
                num7 += Number(distributionQuantity)
                num7 += Number(remainDistributionQuantity)
            }
        }
    )
    statistics2.num1 = num1
    statistics2.num2 = num2
    statistics2.num3 = num3
    statistics2.num4 = num4
    statistics2.num5 = num5
    statistics2.num6 = num6
    statistics2.num7 = num7
}

watch(
    () => tableData2.value,
    () => {
        getStatistics2()
    }
)

function handlerEditTable2() {
    tableData2Clone = cloneDeep(tableData2.value)
    editTable2.value = true
}

function handlerCancel() {
    tableData2.value = cloneDeep(tableData2Clone)
    editTable2.value = false
}

function handlerSave() {
    loading.value = true
    post('/solution-zjcnfsn-distribution/api/v1/distribution', { id: distributionId.value }).then(({ errorMsg }) => {
        loading.value = false
        if (errorMsg) {
            message.error(errorMsg)
        } else {
            message.success('保存成功')
        }
    })
}

function handlerUnset() {
    current.value = 0
    uuid = undefined
    distributionId.value = ''
    currentPage.value = 1
    filterTable1.value = ''
    filterTable2.value = ''
    tableData1.value = tableData1Clone = []
    tableData2.value = tableData2Clone = []
    getStatistics()
    resetFields()
}
</script>
  <style lang="less" scoped>
.page_root {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
    height: 100%;
}
.table-moreBtn_down {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
    height: 100%;
    width: 50%;
}
.vid_rkqe6n181v {
    width: 100%;
}

.create-plan {
    height: fill-available;
    height: -webkit-fill-available;
    margin: 20px;
}
.create-plan > * {
    background: #fff;
}
.step {
    margin: 0 auto 10px;
    padding: 20px 12%;
}
.footer {
    width: 100%;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    display: flex;
    justify-content: center;
}
.footer > * {
    margin-left: 8px;
}

.content {
    min-height: 73vh;
    padding: 20px 20px 50px;
}
.form {
    padding-top: 40px;
}
.date-group .aps-form-item-control-input-content {
    display: flex;
    align-items: center;
}
.date-group .aps-form-item-control-input-content span {
    margin: 0 10px;
}
.radio {
    margin-left: 15px;
}
.aps-form-item-has-error .aps-radio-button-wrapper {
    border-color: #d9d9d9 !important;
}
.aps-form-item-has-error .aps-radio-button-wrapper:not(:first-child)::before {
    display: none;
}

.table-header {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-indent: 20px;
}
.table-header.tag {
    border-left: 8px solid #1890ff;
}
.table-header div:last-child {
    display: flex;
}

.table-header div:last-child > .aps-btn {
    margin-left: 8px;
}

.gather {
    display: inline-block;
    border: 1px solid #f0f0f0;
    padding: 10px 25px;
    box-shadow: 5px 4px 10px 0px rgba(0, 0, 0, 0.3);
    margin-right: 10px;
    background: linear-gradient(#cff1f1, #fff, #fff, #fff);
}

.gather:nth-child(4) {
    margin-right: 50px;
}

.aps-upload.aps-upload-select {
    display: block;
}

.tag-list {
    align-items: center;
}

.distribution-remain {
    white-space: nowrap;
}
</style>
  